<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Springboot增删改查案例</title>

    <!-- All Css files -->

    <link rel="stylesheet"
          href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/4.5.3/css/bootstrap.min.css">
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css"
          rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- All Js Files -->
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/4.5.3/js/bootstrap.min.js"></script>
	<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/popper.js/1.10.0/popper.min.js"></script>
    <script src="assets/js/custom.js"></script>

</head>
<body>
<div class="container-xl">
    <div class="table-responsive">
        <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                    <div class="col-sm-6">
                        <h2>用户管理模板</b></h2>
                    </div>
                    <div class="col-sm-6">
                        <a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i
                                class="fa fa-plus"></i> <span>新增</span></a>
                        <a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i
                                class="fa fa-minus-circle"></i> <span>删除</span></a>
                    </div>
                </div>
            </div>
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>
							<span class="custom-checkbox">
								<input type="checkbox" id="selectAll">
								<label for="selectAll"></label>
							</span>
                    </th>
                    <th>用户名</th>
                    <th>性别</th>
                    <th>出生日期</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
							<span class="custom-checkbox">
								<input type="checkbox" id="checkbox1" name="options[]" value="1">
								<label for="checkbox1"></label>
							</span>
                    </td>
                    <td>宋小宝</td>
                    <td>男</td>
                    <td>1999-10-10</td>
                    <td>baobao1999@qq.com</td>
                    <td>
                        <a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="fa fa-edit"
                                                                                         data-toggle="tooltip"
                                                                                         title="更新"></i></a>
                        <a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="fa fa-trash"
                                                                                             data-toggle="tooltip"
                                                                                             title="删除"></i></a>
                    </td>
                </tr>
                <tr>
                    <td>
							<span class="custom-checkbox">
								<input type="checkbox" id="checkbox1" name="options[]" value="1">
								<label for="checkbox1"></label>
							</span>
                    </td>
                    <td>宋小宝</td>
                    <td>男</td>
                    <td>1999-10-10</td>
                    <td>baobao1999@qq.com</td>
                    <td>
                        <a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="fa fa-edit"
                                                                                         data-toggle="tooltip"
                                                                                         title="更新"></i></a>
                        <a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="fa fa-trash"
                                                                                             data-toggle="tooltip"
                                                                                             title="删除"></i></a>
                    </td>
                </tr>
                <tr>
                    <td>
							<span class="custom-checkbox">
								<input type="checkbox" id="checkbox1" name="options[]" value="1">
								<label for="checkbox1"></label>
							</span>
                    </td>
                    <td>宋小宝</td>
                    <td>男</td>
                    <td>1999-10-10</td>
                    <td>baobao1999@qq.com</td>
                    <td>
                        <a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="fa fa-edit"
                                                                                         data-toggle="tooltip"
                                                                                         title="更新"></i></a>
                        <a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="fa fa-trash"
                                                                                             data-toggle="tooltip"
                                                                                             title="删除"></i></a>
                    </td>
                </tr>
                <tr>
                    <td>
							<span class="custom-checkbox">
								<input type="checkbox" id="checkbox1" name="options[]" value="1">
								<label for="checkbox1"></label>
							</span>
                    </td>
                    <td>宋小宝</td>
                    <td>男</td>
                    <td>1999-10-10</td>
                    <td>baobao1999@qq.com</td>
                    <td>
                        <a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="fa fa-edit"
                                                                                         data-toggle="tooltip"
                                                                                         title="更新"></i></a>
                        <a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="fa fa-trash"
                                                                                             data-toggle="tooltip"
                                                                                             title="删除"></i></a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="clearfix">
                <div class="hint-text">总记录：<b>100</b>&nbsp;&nbsp; 每页: <b>25</b> 条记录</div>
                <ul class="pagination">
                    <li class="page-item"><a href="#" class="page-link">上一页</a></li>
                    <li class="page-item"><a href="#" class="page-link">1</a></li>
                    <li class="page-item"><a href="#" class="page-link">2</a></li>
                    <li class="page-item active"><a href="#" class="page-link">3</a></li>
                    <li class="page-item"><a href="#" class="page-link">4</a></li>
                    <li class="page-item"><a href="#" class="page-link">5</a></li>
                    <li class="page-item"><a href="#" class="page-link">下一页</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- Edit Modal HTML -->
<div id="addEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="addUserForm">
                <div class="modal-header">
                    <h4 class="modal-title">新增用户</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" name="username" required>
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" name="password" required>
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <div>
                            <input type="radio" name="gender" value="男" checked/>男&nbsp;&nbsp;<input type="radio"
                                                                                                       name="gender"
                                                                                                       value="女"/>女
                        </div>
                    </div>
                    <div class="form-group">
                        <label>出生日期</label>
                        <input type="date" name="birthday" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label>电子邮箱</label>
                        <input type="email" class="form-control" name="email" required>
                    </div>

                    <div class="form-group">
                        <label>手机</label>
                        <input type="text" class="form-control" name="mobile" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="取消">
                    <input type="submit" class="btn btn-success" value="新增">
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Edit Modal HTML -->
<div id="editEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editUserForm">
                <div class="modal-header">
                    <h4 class="modal-title">新增用户</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <div>
                            <input type="radio" name="gender" value="男" checked/>男&nbsp;&nbsp;<input type="radio"
                                                                                                       name="gender"
                                                                                                       value="女"/>女
                        </div>
                    </div>
                    <div class="form-group">
                        <label>出生日期</label>
                        <input type="date" name="birthday" id="birthday" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label>电子邮箱</label>
                        <input type="email" class="form-control" name="email" id="email" required>
                    </div>

                    <div class="form-group">
                        <label>手机</label>
                        <input type="text" class="form-control" name="mobile" id="mobile" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="取消">
                    <input type="submit" class="btn btn-success" value="新增">
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Delete Modal HTML -->
<div id="deleteEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <h4 class="modal-title">删除用户</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p>确定要删除该用户吗?</p>
                    <p class="text-warning"><small>该操作不可回滚.</small></p>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="取消">
                    <input type="submit" class="btn btn-danger" value="删除">
                </div>
            </form>
        </div>
    </div>
</div>

<script>

    //用户集合
    let users = [];

    //这个用户集合应该是通过发送一个异步请求来获取。
   function initUsersList() {
	   console.log('----初始化用户列表----');
	   $.ajax({
		   url: 'http://localhost:8080/cruddemo/users/all',
		   type: 'GET',
		   dataType: 'json',
		   async: true,
		   success: resp => {
			   console.log(resp);
		   },
		   error: err => {
			   console.log(err);
		   }
	   })
   }

   initUsersList();

</script>
</body>
</html>
